<template>
  <div>
    <el-dialog
      :title="titlecom"
      :visible.sync="dialogFormVisible"
      width="800px"
    >
      <el-form :model="form" label-width="200px" class="demo-ruleForm">
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="0点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price0"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="0点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price30"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="1点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price1"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="1点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price83"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="2点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price2"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="2点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price93"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="3点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price3"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="3点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price103"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="4点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price4"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="4点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price113"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="5点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price5"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="5点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price123"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="6点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price6"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="6点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price130"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="7点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price7"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="7点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price133"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="8点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price0"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="8点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price143"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="9点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price9"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="9点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price153"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="10点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price10"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="10点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price163"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="11点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price11"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="11点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price173"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="12点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price12"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="12点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price183"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="13点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price13"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="13点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price193"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="14点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price14"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="14点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price83"
            >
              <el-input
                v-model="form.price203"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="15点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price15"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="15点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price233"
            >
              <el-input
                v-model="form.price213"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="16点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price16"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="16点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price233"
            >
              <el-input
                v-model="form.price223"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="17点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price17"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="17点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price230"
            >
              <el-input
                v-model="form.price230"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="18点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price18"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="18点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price233"
            >
              <el-input
                v-model="form.price213"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="19点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price19"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="19点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price233"
            >
              <el-input
                v-model="form.price330"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="20点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price20"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="20点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price233"
            >
              <el-input
                v-model="form.price430"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="21点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price21"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="21点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price233"
            >
              <el-input
                v-model="form.price530"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="22点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price22"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="22点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price233"
            >
              <el-input
                v-model="form.price630"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item
              label="23点额外夜班费用"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.price23"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="23点30额外夜班费用"
              :label-width="formLabelWidth"
              prop="price233"
            >
              <el-input
                v-model="form.price730"
                class="specificationInput"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="quedingtianjia()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addservetypeadd,
  updateservenightupdate,
  getservetypes,
  getservenightinfo,
} from "@/api/server";
import { upload } from "@/api/editor.js";
import EditorBar from "@/components/Editor";
import draggable from "vuedraggable";
export default {
  components: {
    EditorBar,
    draggable,
  },
  data() {
    return {
      parameter: [{ price: "", name: "", title: "" }],
      isClear: false,
      dialogVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "170px",
      form: {
        serveid: "",
      },
      imgList: [],
      dialogImageUrl: "",
      dialogVisible1: false,
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        image: [{ required: true, message: "请选择头像", trigger: "blur" }],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        pwd: [{ required: true, message: "请选择密码", trigger: "blur" }],
      },
      qubie: 0,
      reqCategory1: [],
      reqCategory2: [
        { id: 1, name: "全额支付" },
        { id: 2, name: "付定金" },
        { id: 3, name: "直接预约不付款" },
      ],
    };
  },
  methods: {
    deleteclick(index) {
      console.log(index);
      this.parameter.splice(index, 1);
    },
    addItem() {
      if (
        this.parameter[this.parameter.length - 1].price == "" ||
        this.parameter[this.parameter.length - 1].name == "" ||
        this.parameter[this.parameter.length - 1].title == ""
      ) {
        return this.$message.error("请填写好上一级的信息,才能继续添加");
      }
      this.parameter.push({
        price: "",
        name: "",
        title: "",
      });
    },
    change() {},
    // 获取二级服务分类列表
    async getservetypes1() {
      let result = await getservetypes({adminid:Number(localStorage.getItem('userId'))});
      console.log(result);
    },
    async add(val) {
      this.form = {
        price0: "",
        price30: "",
        price1: "",
        price83: "",
        price2: "",
        price93: "",
        price3: "",
        price103: "",
        price4: "",
        price113: "",
        price5: "",
        price123: "",
        price6: "",
        price130: "",
        price7: "",
        price133: "",
        price8: "",
        price143: "",
        price9: "",
        price153: "",
        price10: "",
        price163: "",
        price11: "",
        price173: "",
        price12: "",
        price183: "",
        price13: "",
        price193: "",
        price14: "",
        price203: "",
        price15: "",
        price213: "",
        price16: "",
        price223: "",
        price17: "",
        price230: "",
        price18: "",
        price233: "",
        price19: "",
        price330: "",
        price20: "",
        price430: "",
        price21: "",
        price530: "",
        price22: "",
        price630: "",
        price23: "",
        price730: "",
      };
      console.log(val);
      // this.getservetypes1();
      this.qubie = 0;
      let result = await getservenightinfo({ serveid: val.id,adminid:Number(localStorage.getItem('userId'))});
      if (result.code == 0) {
        this.form = Object.assign(this.form, result.data);
      }
      this.form.serveid = val.id;
      this.dialogFormVisible = true;
      this.imgList = [];
    },
    edit(val) {
      this.form = {
        name: "",
        sort: "",
        image: "",
        pid: "",
        classify: "",
      };
      // this.getservetypes1();
      this.qubie = 1;
      this.form = Object.assign(this.form, val);
      this.dialogFormVisible = true;
      this.imgList = [];
    },
    // 关闭
    handleClose() {
      this.dialogFormVisible = false;
      this.$emit("refresh");
    },

    async quedingtianjia() {
      if (this.qubie == 0) {
        let param = {
          serveid: parseInt(this.form.serveid),
          price0: parseInt(this.form.price0),
          price30: parseInt(this.form.price30),
          price1: parseInt(this.form.price1),
          price83: parseInt(this.form.price83),
          price2: parseInt(this.form.price2),
          price93: parseInt(this.form.price93),
          price3: parseInt(this.form.price3),
          price103: parseInt(this.form.price103),
          price4: parseInt(this.form.price4),
          price113: parseInt(this.form.price113),
          price5: parseInt(this.form.price5),
          price123: parseInt(this.form.price123),

          price6: parseInt(this.form.price6),
          price130: parseInt(this.form.price130),
          price7: parseInt(this.form.price7),
          price133: parseInt(this.form.price133),
          price8: parseInt(this.form.price8),
          price143: parseInt(this.form.price143),
          price9: parseInt(this.form.price9),
          price153: parseInt(this.form.price153),
          price10: parseInt(this.form.price10),
          price163: parseInt(this.form.price163),

          price11: parseInt(this.form.price11),
          price173: parseInt(this.form.price173),
          price12: parseInt(this.form.price12),
          price183: parseInt(this.form.price183),

          price13: parseInt(this.form.price13),
          price193: parseInt(this.form.price193),
          price14: parseInt(this.form.price14),
          price203: parseInt(this.form.price203),

          price15: parseInt(this.form.price15),
          price213: parseInt(this.form.price213),
          price16: parseInt(this.form.price16),
          price223: parseInt(this.form.price223),
          price17: parseInt(this.form.price17),
          price230: parseInt(this.form.price230),
          price18: parseInt(this.form.price18),
          price233: parseInt(this.form.price233),
          price19: parseInt(this.form.price19),
          price330: parseInt(this.form.price330),
          price20: parseInt(this.form.price20),
          price430: parseInt(this.form.price430),
          price21: parseInt(this.form.price21),
          price530: parseInt(this.form.price530),
          price22: parseInt(this.form.price22),
          price630: parseInt(this.form.price630),
          price23: parseInt(this.form.price23),
          price730: parseInt(this.form.price730),
          adminid:Number(localStorage.getItem('userId'))
        };
        let result = await updateservenightupdate(param);
        if (result.code == 0) {
          this.$message({
            message: `设置夜班加班费成功`,
            type: "success",
          });
          this.handleClose();
        }
      }
    },
    //轮播图上传
    uploadFile(param) {
      var file = param.file;
      const formData = new FormData();
      formData.append("file", file);
      upload(formData, param).then((res) => {
        if (res.code == 0) {
          // ---------------------------这是商品轮播图 最后要通过 图片逗号拼接
          this.imgList.push({ url: res.data });
        }
      });
      console.log(this.imgList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible1 = true;
      console.log(file);
    },
    //轮播图移除图片
    handleRemove(file, fileList) {
      // fileList是剩下的照片
      this.imgList = fileList;
    },
    //图上传
    async comodityUpload(param) {
      var file = param.file;
      const formData = new FormData();
      formData.append("file", file);
      console.log(param);
      // let result = await upload(formData);
      // console.log(result);
      // if (res.code == 0) {
      //   this.form.image = res.data;
      // }
      upload(formData, param).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.form.image = res.data;
        }
      });
    },
  },
  watch: {
    imgList: {
      handler(newVal) {
        // console.log("监听", newVal);
        // 这里创建新的数组 用逗号进行隔开 主要是接口要求
        let imagesarr = [];
        const result = newVal.map((item) => `${item.url}`).join(",");
        // this.form.content = result;
        console.log("猪嗨", this.form.content);
      },
      deep: true,
    },
  },
  computed: {
    titlecom() {
      if (this.qubie == 0) {
        return "服务夜班加班费设置 ";
      } else {
        return "服务夜班加班费设置 ";
      }
    },
  },
};
</script>

<style scoped lang="scss">
.specificationInput {
  width: 150px;
}
.avatar-uploader-icon[data-v-22a48a68] {
  border: 1px dashed #d9d9d9;
  width: 148px;
  height: 148px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 148px;
  height: 148px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.addguigeBtn {
  margin-left: 100px;
  margin-bottom: 22px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}

.avatar {
  width: 180px;
  height: 180px;
  display: block;
}
v-deep .el-upload--picture-card {
  width: 200px !important;
  height: 200px !important;
}
.specificationInput1 {
  width: 150px;
}
</style>
